<template>
	<view class="container">
		<view class="tixian-title">提现金额</view>
		<view class="input-box">
			<text>￥</text>
			<input type="number" @input="inputmoney" v-model="money" placeholder="输入提现金额" style="margin-left: 20rpx;"/>
		</view>
		<view class="text">
			<text style="color: #999999; font-weight: 400;">当前钱包余额{{memberInfo.balance}}元,</text>
			<text style="color: #000000;" @click="alltixian">全部提现</text>
		</view>
		<view class="tixian-to">提现至</view>
		<view class="bankcard" @click="checkcard">
			<image src="../../static/balance/bankcard.png" mode="widthFix"></image>
			<view class="card">银行卡</view>
			<view class="btn" v-if="checked">
				<image src="../../static/balance/check.png" mode="widthFix" ></image>
			</view>
			<view class="btn" v-else></view>
		</view>
		<!-- <view class="zfb-box" @click="checkzfb">
			<image src="../../static/balance/zfb.png" mode="widthFix"></image>
			<view class="zfb">支付宝</view>
			<view class="btn-zfb" v-if="check">
				<image src="../../static/balance/check.png" mode="widthFix"></image>
			</view>
			<view class="btn-zfb" v-else></view>
		</view> -->
		<view class="next" :class="{'next-after':flag}" @click="nextBtn">下一步</view>
	</view>
</template>

<script>
	import {getUser} from "../../api/user.js"
	export default{
		data(){
			return{
				flag:false,
				checked:false,
				check:false,
				money:"",
				yu:'',
				memberInfo:{}
			}
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			this.getData()
		},
		onNavigationBarButtonTap(){
			uni.navigateTo({
				url:"/pages/balance/tixianbill"
			})
		},
		methods:{
			getData(){
				this.post(getUser,{
					user_id:uni.getStorageSync("userInfo").id
				}).then(res => {
						if(res.code == 1){
							this.memberInfo = res.data.member_info	
						}
				})
			},
			inputmoney(){
				if(this.money!=''){
					this.flag=true
				}else{
					this.flag=false
				}
			},
			checkcard(){
				this.checked=!this.checked
				this.check=false
			},
			checkzfb(){
				this.check=!this.check
				this.checked=false
			},
			alltixian(){
				this.money=this.memberInfo.balance
				if(this.money>0){
					this.flag=true
				}
			},
			nextBtn(){
				uni.navigateTo({
					url:`/pages/balance/inputbankcard?money=${this.money}`
				})
			}
		}
	}
</script>

<style>
	.container{
		padding: 40rpx 30rpx;
	}
	.tixian-title{
		width: 300rpx;
		font-size: 30rpx;
		font-weight: 300;
		color: #999999;
	}
	.input-box{
		display: flex;
		align-items: center;
		border-bottom: 1px solid #D5D5D5;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
	}
	.text{
		margin-top: 10rpx;
		font-size: 30rpx;
		font-weight: 600;
	}
	.tixian-to{
		width: 96rpx;
		height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 45rpx;
		color: #333333;
		margin-top: 60rpx;
	}
	.bankcard{
		width: 690rpx;
		height: 88rpx;
		border: 1px solid #008573;
		border-radius: 44rpx;
		margin-top: 50rpx;
		display: flex;
		align-items: center;
	}
	.bankcard>image{
		width: 32rpx;
		margin-left: 55rpx;
		display:block;
	}
	.card{
		margin-left: 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #008573;
	}
	.btn{
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background: #008573;
		margin-left: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.btn>image{
		width: 26rpx;
		/* height: 26rpx; */
	}
	.zfb-box{
		width: 690rpx;
		height: 88rpx;
		border: 1px solid #4DB6FF;
		border-radius: 44rpx;
		margin-top: 50rpx;
		display: flex;
		align-items: center;
	}
	.zfb-box>image{
		width: 32rpx;
		margin-left: 55rpx;
	}
	.zfb{
		margin-left: 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #4DB6FF;
	}
	.btn-zfb{
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background: #4DB6FF;
		margin-left: 400rpx;
		display: flex;
		align-items: center;
	}
	.btn-zfb>image{
		width: 26rpx;
	}
	.next{
		width: 460rpx;
		height: 88rpx;
		background: #008573;
		opacity: 0.3;
		border-radius: 8rpx;
		margin: 150rpx auto;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
	}
	.next-after{
		background: #008573;
		opacity: 1;
	}
</style>
